<template>
	<!-- 计数器组件 -->
	<view class="counter">
		<text class="iconfont icon-jianhao sub" @tap="handleSub" :class="purchaseNum == 1 ? 'disabled-sub' : ''"></text>
		<input class="num" type="number" v-model="purchaseNum" />
		<text class="iconfont icon-jiahao add" @tap="handleAdd"></text>
	</view>
</template>

<script>
export default {
	data() {
		return {
			purchaseNum: 1
		};
	},
	methods: {
		handleSub() {
			if (this.purchaseNum == 1) {
				return;
			}
			this.purchaseNum--;
		},
		handleAdd() {
			this.purchaseNum++;
		}
	},
	watch: {
		purchaseNum: {
			handler(newVal, oldVal) {
				// console.log("newVal", newVal)
				if (!newVal) {
					this.$set(this, 'purchaseNum', 1);
				}
			},
			immediate: true
		}
	}
};
</script>

<style scoped lang="less">
@theme-color: #ff5a14;

.counter {
	display: flex;
	flex-direction: row;
}

.num {
	padding: 0 20rpx;
	width: 80rpx;
	text-align: center;
}

.disabled-sub {
	opacity: 0.3;
}

.sub {
	color: @theme-color;
	// 9rpx的padding + 1rpx的border = add元素10rpx的padding
	padding: 9rpx;
	border: 1rpx solid @theme-color;
	border-radius: 50%;
	font-size: 30rpx;
	display: inline-block;
}

.add {
	color: #fff;
	background-color: @theme-color;
	padding: 10rpx;
	border-radius: 50%;
	font-size: 30rpx;
}
</style>
